<template>
  <view>
    <view class="my-bg">
      <up-navbar
        title="个人中心"
        leftIcon=""
        bgColor="rgba(0,0,0,0)"
        :titleStyle="{ color: '#fff' }">
      </up-navbar>
      <view class="flex pt-100 justify-between items-center mx-25">
        <view class="flex">
          <u-image
            :src="$sc.loadImg('banner.png')"
            width="114rpx"
            height="114rpx"
            shape="circle"></u-image>
          <view class="ml-38 color-#fff">
            <view class="text-34">九月的话</view>
            <view class="text-24 mt-25">普通用户</view>
          </view>
        </view>
        <view>
          <u-image
            :src="$sc.loadImg('change.png')"
            width="182rpx"
            height="60rpx"></u-image>
        </view>
      </view>
      <view class="bg-white mt-80 mx-25 p-40 box-border rd-2">
        <view class="flex justify-between">
          <view class="color-#333 text-34">我的订单</view>
          <view class="color-#999 text-24">查看所有订单 ></view>
        </view>
        <view class="mt-35">
          <up-grid :border="false" @click="click" :col="5">
            <up-grid-item v-for="(item, index) in menuList" :key="index">
              <u-image
                :src="$sc.loadImg(`myicon${index + 1}.png`)"
                width="80rpx"
                height="80rpx"></u-image>
              <text class="color-#222 text-26">{{ item.title }}</text>
            </up-grid-item>
          </up-grid>
          <view class="mt-50">
            <up-gap height="1" bgColor="#e6e6e6"></up-gap>
          </view>
        </view>
        <view
          v-for="item in menu2"
          :key="item.id"
          class="flex justify-between mt-40 items-center">
          <view class="flex items-center">
            <u-image
              :src="$sc.loadImg(`myicon${item.id}.png`)"
              width="70rpx"
              height="70rpx"></u-image>
            <view class="color-#333 text-26 ml-30">{{ item.title }}</view>
          </view>
          <view>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const menuList = ref([
  {
    id: 1,
    title: "代付款",
    handle: () => uni.$u.route("/pagesA/address/index"),
  },
  {
    id: 2,
    title: "待服务",
    handle: () => uni.$u.toast("暂未开放"),
  },
  {
    id: 2,
    title: "已完成",
    handle: () => uni.$u.route("/funpages/funs/index"),
  },
  {
    id: 3,
    title: "待评价",
  },
  {
    id: 3,
    title: "售后",
  },
]);
const menu2 = ref([
  {
    title: "我的地址",
    id: 6,
  },
  {
    title: "人员信息",
    id: 7,
  },
  {
    title: "隐私政策",
    id: 8,
  },
  {
    title: "账户设置",
    id: 9,
  },
]);
</script>
<style>
page {
  background-color: #ededed;
}
</style>
<style lang="scss" scoped>
.my-bg {
  width: 100%;
  height: 758rpx;
  background: url("https://file.sdbly.cn/nurse/static/mybg.png") no-repeat;
  background-size: 100% 100%;
}
</style>
